<template>
  <div class="app-container " style="width: 81.5vw">
    <!-- 上层卡片 -->
    <el-card id="card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="top">
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="盘点编号">
              <el-input v-model="formInline.code" class="input" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务状态">
              <el-select
                v-model="formInline.status"
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in enmuration.inventory.options"
                  :key="item.status"
                  :label="item.label"
                  :value="item.status"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点类型">
              <el-select
                v-model="formInline.type"
                placeholder="请选择"
                style="width: 100%;"
              >
                <el-option label="随机盘点" value="SJPD" />
                <el-option label="计划盘点" value="JHPD" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btnpos">
            <el-form-item>
              <el-col :span="12">
                <el-button type="primary" class="btnSearch" @click="btnSearch">搜索</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" class="btnReset" @click="btnReset">重置</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 下层卡片 -->
    <el-card id="card2">
      <el-row class="rowone">
        <el-button class="add-btn" @click="handlePD('null')">生成损益单</el-button>
        <el-button>生成复盘</el-button>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center','font-size':'13px','line-height':'13px'}"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="name"
            label="序号"
            width="68"
            type="index"
          />
          <el-table-column
            prop="checkCode"
            label="盘点单号"
            width="160"
          />
          <el-table-column
            prop="code"
            label="任务编号"
            width="160"
          />
          <el-table-column
            prop="status"
            label="任务状态"
            width="160"
            :formatter="formatterStatus"
            :filters="enmuration.taskStatus.options"
            :filter-method="filterStatus"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            sortable
          />
          <el-table-column
            prop="planTaskTime"
            label="计划作业时间"
            width="180"
            sortable
          />
          <el-table-column
            prop="ownerName"
            label="货主"
            width="140"
          />
          <el-table-column
            prop="dimension"
            :formatter="formatDimension"
            label="盘点维度"
            width="160"
          />
          <el-table-column
            prop="type"
            :formatter="formatType"
            label="盘点类型"
            width="160"
          />
          <el-table-column
            prop="warehouseName"
            label="仓库"
            width="120"
          />
          <el-table-column
            prop="areaName"
            label="库区"
            width="160"
          />
          <el-table-column
            prop="stockTotal"
            label="库存总数"
            width="160"
          />
          <el-table-column
            prop="checkNum"
            label="盘点次数"
            width="160"
            :formatter="formatcheckNum"
            :filter-method="filterCheckNum"
            :filters="enmuration.checkTimes.options"
          />
          <el-table-column
            prop="personName"
            label="盘点人"
            width="160"
          />
          <el-table-column
            prop="checkTotal"
            label="盘点总数"
            width="160"
          />
          <el-table-column
            prop="differenceNum"
            label="差异合计"
            width="160"
          />
          <el-table-column
            prop="createName"
            label="创建人"
            width="160"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="230"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" class="" @click="handleClick(scope.row)">演示系统逻辑不明</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="page">
        <el-pagination
          align="center"
          :current-page="pageConfig.current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageConfig.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import enmuration from '@/components/SearchControl/selete.js'
import { getCheckTask } from '@/api/list-task'
export default {
  name: 'YuanfengWarehouseListTask',

  data() {
    return {
      formInline: {},
      enmuration: enmuration,
      tableData: [],
      pageConfig: {
        current: 1,
        size: 10
      },
      total: 0
    }
  },
  created() {
    this.init(this.pageConfig)
  },
  methods: {
    // 页面初始化渲染函数
    async init(data) {
      const res = (await getCheckTask(data)).data.data
      // console.log(res)
      this.total = +res.total
      this.tableData = res.records
    },
    // 页面尺寸发生改变时触发
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.pageConfig.size = newSize
      this.init(this.pageConfig)
    },
    // 页码改变时候触发
    handleCurrentChange(newcurrent) {
      // console.log(newcurrent)
      this.pageConfig.current = newcurrent
      this.init(this.pageConfig)
    },
    // 任务状态格式化
    formatterStatus(row, col, val) {
      const res = enmuration.taskStatus.options.find(item => item.status === val)
      // console.log(res)
      return res ? res.value : ''
    },
    // 任务状态筛选
    filterStatus(value, row, column) {
      // console.log(value)
      const res = enmuration.taskStatus.options.find(item => item.value === value)
      // console.log(res.value === value)
      return row.status === res.status
    },
    // 盘点维度格式化
    formatDimension(row, col, val) {
      const res = enmuration.dimension.options.find(item => item.id === val)
      return res ? res.value : ''
    },
    // 盘点类型格式化
    formatType(row, col, val) {
      const res = enmuration.counting.options.find(item => item.value === val)
      return res ? res.label : ''
    },
    // 盘点次数格式化
    formatcheckNum(row, col, val) {
      const res = enmuration.checkTimes.options.find(item => item.id === val)
      return res ? res.value : ''
    },
    // 筛选盘点次数
    filterCheckNum(value, row, column) {
      // console.log(value)
      const res = enmuration.checkTimes.options.find(item => item.value === value)
      return row.checkNum === res.id
    },
    // 搜索功能
    async btnSearch() {
      console.log(this.formInline)
      // 模糊搜索的数据
      const data = { ...this.pageConfig, ...this.formInline }
      // 发送请求
      await this.init(data)
      this.formInline = {
        code: '',
        status: '',
        type: ''
      }
    },
    // 重置功能
    btnReset() {
      this.formInline = {
        code: '',
        status: '',
        type: ''
      }
      this.init(this.pageConfig)
    }
  },
  // 对话框提示
  handleClick(id) {
    console.log('不演示')
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/list.scss';
.cell {
.el-button--text {
color: $table-operate;
}
}

</style>
